<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      width="1000px"
      :footer="false"
      title="实有单位详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">基本信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <div class="value common-value">{{ companyMessage.companyName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">所属行业</div>
              <div class="value common-value">
                {{ industryInformation.informationName || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">标准地址</div>
              <div class="value common-value">{{ companyMessage.addressDetail || '暂无' }}</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位门头照</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview(companyMessage.doorHeaderUrl)"
                v-if="companyMessage.doorHeaderUrl && companyMessage.doorHeaderUrl.length"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">内部照片</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview(companyMessage.internalUrl)"
                v-if="companyMessage.internalUrl && companyMessage.internalUrl.length"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
          </div>

          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">重点部位照片</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview(companyMessage.keyAreasUrl)"
                v-if="companyMessage.keyAreasUrl && companyMessage.keyAreasUrl.length"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">风险点照片</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview(companyMessage.riskPointsUrl)"
                v-if="companyMessage.riskPointsUrl && companyMessage.riskPointsUrl.length"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">资质信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">统一社会信用代码</div>
              <div class="value common-value">{{ companyMessage.creditCode || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">营业执照照片</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview([companyMessage.businessLicenseUrl])"
                v-if="companyMessage.businessLicenseUrl"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">营业执照单位名称</div>
              <div class="value common-value">{{ companyMessage.businessName || '暂无' }}</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">法人/经营者信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">姓名</div>
              <div class="value common-value">{{ companyLegalPerson.legalPersonName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">证件照片</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview([companyLegalPerson.personImage])"
                v-if="companyLegalPerson.personImage"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">手机号码</div>
              <div class="value common-value">{{ companyLegalPerson.mobile || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">身份证号码</div>
              <div class="value common-value">{{ companyLegalPerson.idCard || '暂无' }}</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">负责人信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">姓名</div>
              <div class="value common-value">{{ dutyPerson.dutyPersonName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">证件照片</div>
              <div
                class="value common-value deatil-color"
                @click="handlePreview([dutyPerson.personImage])"
                v-if="dutyPerson.personImage"
              >
                查看
              </div>
              <div v-else class="value common-value">暂无</div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">手机号码</div>
              <div class="value common-value">{{ dutyPerson.mobile || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">身份证号码</div>
              <div class="value common-value">{{ dutyPerson.idCard || '暂无' }}</div>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">采集信息</div>
        </div>
        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">采集人员</div>
              <div class="value common-value">{{ companyMessage.collectionName || '暂无' }}</div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">人员类型</div>
              <div class="value common-value">
                {{ companyMessage.collectionType || '暂无' }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">采集时间</div>
              <div class="value common-value">{{ companyMessage.createTime || '暂无' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import publicModal from '@/components/publicModal'
import { houseDetails, companyWebDetails } from '@/api/api'
import { webpopulationDetails } from '../../../../api/api'
import { getPrefixImg } from '../../../../utils/util'

export default {
  name: 'actuallyDetail',
  components: { publicModal, startEndTime },
  data() {
    return {
      prefixImg: getPrefixImg(),
      url: {
        list: '/common/project_company_serve_record/page',
      },
      publicVisible: false,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '标准地址',
          align: 'center',
          dataIndex: 'fHjdzQhnxxdz',
          ellipsis: true,
        },
        {
          title: '与房主关系',
          align: 'center',
          dataIndex: 'fYfzgx',
          ellipsis: true,
        },
        {
          title: '所属派出所',
          align: 'center',
          dataIndex: 'policeAgencyName',
          ellipsis: true,
        },
      ],
      project_company_type: [],
      queryParams: { pageSize: 5 },
      ipagination: { pageSize: 5 },
      disableMixinCreated: true,

      industryInformation: {},
      dutyPerson: {},
      companyMessage: {},
      companyLegalPerson: {},
    }
  },

  methods: {
    async show(records) {
      this.publicVisible = true
      this.getDetail(records)
    },
    getDetail(records) {
      const params = {
        id: records.id,
      }
      companyWebDetails(params).then((res) => {
        if (res.code == 200) {
          const { industryInformation, dutyPerson, companyMessage, companyLegalPerson } = res.result
          this.industryInformation = industryInformation
          this.dutyPerson = dutyPerson
          this.companyMessage = companyMessage
          this.companyLegalPerson = companyLegalPerson
        } else {
        }
      })
    },
    handleOk() {
      this.publicVisible = false
    },

    cancel(target) {
      this.publicVisible = false
    },

    handlePreview(imgList = []) {
      imgList = imgList.filter((item) => !!Boolean(item))
      if (!imgList.length) {
        return
      }
      let images = imgList.map((item) => {
        return this.prefixImg + item
      })
      // 拼接前缀
      const $viewer = this.$viewerApi({
        images,
      })
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
</style>
